<script lang="ts" setup>
// #region 引入包, 函数和组件
import { reactive } from 'vue'
import Form from './FormTemplate.vue' // 表单模版
import type { Form as FormType } from './FormTemplate.vue' // 表单模版
import { registApi } from '@/service' // 登录接口
import { ElMessage, ElMessageBox } from 'element-plus'
// import { useRouter } from 'vue-router'

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
// const router = useRouter()
const emits = defineEmits<{
  change: []
}>()
// #endregion

// #region // 变量
const form = reactive({
  username: '',
  password: '',
  passwordAg: '',
})
// #endregion

// #region // 函数
const success = (params: FormType) => {
  registApi(params)
    .then((res) => {
      console.log(res.data)
      if (res.data.code === 0) {
        ElMessage({
          type: 'success',
          plain: true,
          message: res.data.msg,
        })
        // router.push('/')
        ElMessageBox.confirm(`您已经注册成功了! 立即前往登录?`, '注册成功', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'success',
        }).then(() => {
          emits('change')
        })
      } else if (res.data.code == -1) {
        ElMessage({
          type: 'error',
          plain: true,
          message: res.data.msg,
        })
      }
    })
    .catch((error) => console.log(error))
}
// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <Form
    title="注册"
    @success="success($event!)"
    v-model:form="form"
    @change="emits('change')"
    msg="已有账号? 去登录~"
    text="注册"
  ></Form>
</template>

<style lang="scss" scoped></style>
